<template>
	<view>
		
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="添加备件" color="#fff" @leftClick="leftClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
		</fui-nav-bar>
			
		<scroll-view scroll-y="true" style="height: 100vh;padding-bottom: 120rpx;">
			<view class="warp">
			  <view class="nav">
			    <view class="port">
			      <view class="title">
			        <fui-section :padding="['0', '20rpx']" title="备件信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
			      </view>
			      <view class="li">
			        <fui-input label="备件编码" borderTop placeholder="系统自动生成" label-size="28rpx" disabled="" placeholder-style="font-size:28rpx"></fui-input>
			      </view>
			      <view class="li">
							<fui-input v-model="info.warehouseName" label="备件名称" borderTop placeholder="请输入备件名称" label-size="28rpx" placeholder-style="font-size:28rpx"></fui-input>
			      </view>
			      <view class="li">
							<fui-input v-model="info.requisitionType" label="规格型号" borderTop placeholder="请输入规格型号" label-size="28rpx" placeholder-style="font-size:28rpx"></fui-input>
			      </view>
			      <view class="li">
			       <fui-input v-model="info.workOrderType" label="备件类型" :bottomLeft="0" placeholder="请选择备件类型" label-size="28rpx"  placeholder-style="font-size:28rpx">
			         <fui-icon :size="30" name="arrowright" @click="showA = true"></fui-icon>
			       </fui-input>
			      </view>
			      <view class="li">
			       <fui-input v-model="info.unit" label="单位" :bottomLeft="0" placeholder="请选择单位" label-size="28rpx"  placeholder-style="font-size:28rpx">
			         <fui-icon :size="30" name="arrowright" @click="showD = true"></fui-icon>
			       </fui-input>
			      </view>
						<view class="li">
							<fui-input v-model="info.Manufacturer" label="生产厂商" borderTop placeholder="请输入生产厂商" label-size="28rpx" placeholder-style="font-size:28rpx"></fui-input>
						</view>
						<view class="" style="margin-left: 30rpx;">
							<view class="li">
							  <view class="left">备注</view>
							</view>
							<u--textarea v-model="info.remarks" placeholder="请输入备注" border="none" style="margin-left: 30rpx;"></u--textarea>
						</view>
			    </view>
			  </view>
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section :padding="['0', '20rpx']" title="备件库存" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
						</view>
						<view class="li">
							<view class="left">库存上限</view>
							<u-number-box 
								style="position: absolute;right: 30rpx;"
							    button-size="36"
							    color="#ffffff"
							    bgColor="#2979ff"
							    iconStyle="color: #fff"
									:value="info.count1"
							></u-number-box>
						</view>
						<view class="li">
							<view class="left">库存下限</view>
							<u-number-box 
								style="position: absolute;right: 30rpx;"
							    button-size="36"
							    color="#ffffff"
							    bgColor="#2979ff"
							    iconStyle="color: #fff"
									:value="info.count2"
							></u-number-box>
						</view>
						<view class="li">
							<fui-input v-model="info.timeName" label="更换周期" :bottomLeft="0" placeholder="请选择更换周期" label-size="28rpx"  placeholder-style="font-size:28rpx">
							  <fui-icon :size="30" name="arrowright" @click="showE = true"></fui-icon>
							</fui-input>
						</view>
					</view>
				</view>
				
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section title="设备图片" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
							<fui-icon style="position: absolute;right: 30rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
						</view>
							<view class="" style="margin-left: 60rpx;margin-top: 30rpx;">
								上传图片（最多上传10张）
							</view>
						<div class="grid-container">
							<div class="grid-item" v-for="v of 7">
								<image class="img" src="../../static/images/my/background-Img.png" mode=""></image>							
								<fui-icon style="position: absolute;top: 0rpx;left: 100rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
							</div>
						</div>
					</view>
				</view>
				
				<view class="nav warp">
					<view class="port">
						<view class="title">
							<fui-section title="关联文档" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
							<fui-icon style="position: absolute;right: 30rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
						</view>
					
						<view class="document">
						  <view class="debris" v-for="v of 4">
						    <image class="img" src="/static/images/my/my-Profile.png" mode=""></image>
						    <view class="">文档.pdf</view>
								<fui-icon style="position: absolute;right: 30rpx;" :size="35" name="close"  color="#000000" @click="del"></fui-icon>
						  </view>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		
		<fui-picker :options="optionsA" :show="showA" @change="changeA" @cancel="cancelA"></fui-picker>
		<fui-picker :options="optionsB" :show="showD" @change="changeD" @cancel="cancelD"></fui-picker>
		<fui-picker :options="optionsC" :show="showE" @change="changeE" @cancel="cancelE"></fui-picker>
		
		<view class="footer" @click="clickBtn">
		  <view class="recall">提交</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';

let info = reactive({
	code:'',
	warehouseName:'',
	requisitionType:'',
	workOrderType:'',
	unit:'',
	Manufacturer:'',
	remarks:'',
	count1:2,
	count2:2,
	timeName:''
})
const leftClick = () => {
	uni.navigateBack()
}
const showA = ref(false);
const optionsA = ref(['全部', '备件类型1', '备件类型2', '备件类型3', '备件类型4']);

const showD = ref(false);
const optionsB = ref(['全部', '单位1', '单位2', '单位3', '单位4']);

const showE = ref(false);
const optionsC = ref(['天', '月', '季', '年']);

const changeA = (e) => {
  info.workOrderType = e.value;
  showA.value = false;
  console.log(e);
};
const changeD = (e) => {
  info.workOrderType = e.value;
  showD.value = false;
  console.log(e);
};

const changeE = (e) => {
  info.timeName = e.value;
  showE.value = false;
  console.log(e);
};

const cancelA = () => {
  showA.value = false;
};
const cancelD = () => {
  showD.value = false;
};
const cancelE = () => {
  showE.value = false;
};

</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f6f6f6;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port {
	.document {
	  .debris {
	    display: flex;
	    align-items: center;
	    height: 100rpx;
	    .img {
	      width: 60rpx;
	      height: 60rpx;
	      margin: 0 30rpx;
	    }
	  }
	}
	.grid-container {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  gap: 10px;
	  padding: 30rpx;
	}
	
	.grid-item {
	  // text-align: center;
	  // padding: 20px;
		position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .img {
	    width: 100%;
	    border-radius: 50%;
	    height: auto;
	    aspect-ratio: 1/1; /* 指定宽高比为 1:1 */
	  }
	}
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}

.statusType{
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	border: 1rpx solid #0052d9;
	color: #0052d9;
}
.table-container {  
    width: 100%;  
    // border-collapse: collapse;  
		border: 1rpx solid #ccc;
		width: 94%;
		margin-left: 3%;
		background-color: #fff;
		margin-top: 20rpx;
		.table-header {  
		    display: flex;  
		    justify-content: space-between;  
		    align-items: center;  
		    padding: 10px 0;  
		    background-color: #f2f2f2;  
				.table-cell {  
				    flex: 1;  
				    text-align: center;  
				} 
		} 
		.table-body {  
		    width: 100%;  
		    padding: 10px 0; 
				 .table-row {
				     display: flex;  
				     justify-content: space-between;  
				     align-items: center;  
				     padding: 10px 0;  
				     border-bottom: 1px solid #ddd;  
						 .table-cell {  
						     flex: 1;  
						     text-align: center;  
						 } 
				 }
		}  
		  
		
}  
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	margin-top: 20rpx;
  .nav {
    background-color: #fff;
		.port {
		  background-color: #fff;
		  margin-bottom: 20rpx;
		  .li {
		    display: flex;
		    align-items: center;
		    height: 100rpx;
		    padding-left: 40rpx;
		    .right {
		      margin-left: 30rpx;
		      color: #cbb8b8;
		    }
		  }
		  .item {
		    // height: 100rpx;
		    padding-left: 40rpx;
		    padding-bottom: 30rpx;
		    .left {
		      height: 70rpx;
		    }
		    .described {
		      padding-right: 50rpx;
		    }
		  }
		}
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #ffffff;
  }
	.recall2{
		width: 40%;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	.recall3{
		width: 40%;
		background-color: #0052d9;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
